import React, { Component } from 'react';
import { good_goodinfo } from '../utils/api'
import Pswipe from '../components/public/Pswipe'
import './Detai.scss'
import { NavBar, Toast} from 'antd-mobile'
import { StarOutline,StarFill } from 'antd-mobile-icons'


// 导入stor
// import store from '../store/index'
// 导入connect,
import { connect } from 'react-redux'

// 导入动态的action方法
import { collection,request_collection, request_cancelCollection } from '../store/actionCreators'
class Detai extends Component {
    constructor(props){
        super(props)
        this.state={
            goodinfo:{},
            // salesPrice:{}
        }
    }
    componentWillMount(){
        let id = this.props.history.location.state.id
        good_goodinfo({ goodid : id }).then((res)=>{
            console.log(res);
            if(res.data.code == 200){
                this.setState({
                    goodinfo:res.data.goodinfo,
                    // salesPrice:res.data.goodinfo.salesPrice
                },
                ()=>{
                    // console.log(this.state.goodinfo);
                    // console.log(this.state.salesPrice);
                })
            }else {
                Toast.show({
                    icon: 'fail',
                    content: res.data.msg,
                })
                setTimeout(() => {
                    this.props.history.go(-1)
                }, 1000);
            }
        })

    }
     back = () => {
        this.props.history.go(-1)
    }
    // 收藏
    collection(payload){
        // console.log(payload);
        // store.dispatch(collection_push(payload))
        console.log(this.props.collectionLists);
        console.log(payload);
        // 对store中的数据进行遍历，查找
        let items = this.props.collectionLists.find((item)=>{
            console.log(item.id,'fff',payload.id);
            return item.id == payload.id
        })
        console.log(items);
        // 如果没有找到，进行收藏处理，找到进行取消收藏处理
        if( !items){
            // 2：调用react-redux中第二个参数:注入动态action中的方法
            this.props.pushs(payload)
        }else if( items ){
            // 
            this.props.deletes(payload)
        }
    }
    render() {
        // console.log(this.state)
        return (
            <div className='Detai'>
                <NavBar onBack={this.back}>商品详情</NavBar>
                <Pswipe imgLists={this.state.goodinfo.pics} className="swipe"></Pswipe>

                <div className='price'>
                    <div className='priceLeft'>
                        <span>
                            原价 ￥{ parseInt(this.state.goodinfo.salesPrice && this.state.goodinfo.salesPrice.value) }
                        </span>
                        <span>活动价 ￥<span>{parseInt(this.state.goodinfo.salesPrice && this.state.goodinfo.salesPrice.value)}</span></span>
                    </div>
                    <div className='date'>
                        距结束5 天 0 小时
                    </div>
                </div>
                <div className='title'>
                    <div >包邮包税</div>
                    <div className='name'>{this.state.goodinfo && this.state.goodinfo.name}</div>
                    <div >{this.state.goodinfo.brand}{this.state.goodinfo.brandEN}</div>
                </div>
                <div className='btm'>
                    <div className='operation'>
                        {/* 1：触发收藏的函数 */}
                        <div className='collection' onClick={()=>{this.collection(this.state.goodinfo)}}>
                            {
                                this.props.collectionLists.find((item)=>{
                                    return item.id == this.state.goodinfo.id
                                }) ? <StarFill color='red'/> : <StarOutline />
                            }
                            
                            <span>收藏</span>
                        </div>
                        <div className='share'>
                            <i className='iconfont icon-fenxiang'></i>
                            <span>分享</span>
                        </div>
                        <div className='shopcart'>
                            <i className='iconfont icon-gouwuche'></i>
                            <span>购物车</span>
                        </div>
                    </div>
                    <div className='btn'>
                        <div>加入购物车</div>
                        <div>立即购买</div>
                    </div>
                </div>

            </div>
        );
    }
}

// connect 有四个参数，前两个是函数
export default  connect(
    (state)=>{ //将store中的数据，注入或绑定到 props 中
        return {
            collectionLists:state.collections
        }
    },
    (dispatch)=>{
        return { // 将action中的方法，注入到props中
            // 收藏
            pushs: function(payload){
                // 3：调用动态actionCreators中的方法
                dispatch(request_collection(payload))
            },
            //取消收藏 
            deletes: function(payload){
                dispatch(request_cancelCollection(payload))
            }
        }
    }
)(Detai)

